<template>
    <div class="news">
        <li v-for="n in news" :key="n.id">
            <button @click="showDetail(n)">查看详情</button>
            <!-- 第一种query传参 地址栏携带 -->
            <RouterLink :to="`/news/detail?id=${n.id}&title=${n.title}&content=${n.content}`">{{ n.title }}</RouterLink>
            <!-- 第二种query参数 可用name也可用path-->
            <!-- <router-link replace :to="{name: 'detail',query:{id:n.id,title:n.title,content:n.content}}">{{ n.title }}</router-link> -->
            <!-- params传参，这种方式需要路由地址占位 -->
            <!-- <router-link :to="`/news/detail/${n.id}/${n.title}/${n.content}`">{{ n.title }}</router-link> -->
            <!-- 第二种params传参 -->
            <!-- <router-link :to="{ name: 'detail', params: { id: n.id, title: n.title, content: n.content } }">{{ n.title
                }}</router-link> -->

        </li>
        <div class="detail_content">
            <RouterView></RouterView>
        </div>
    </div>

</template>
<script setup lang="ts">
import { reactive } from 'vue';
import { useRouter } from 'vue-router';

const router=useRouter();
let news = reactive([
    { id: "001", title: "今天有新的课程", content: "课程上线了" },
    { id: "002", title: "科技强国", content: "科技强国推出新政策" },
    { id: "003", title: "今天有新的教育资讯", content: "教育资讯上线了" }
])
function showDetail(n:any)
{
router.push({name: 'detail',query:{id:n.id,title:n.title,content:n.content}})
}
</script>
<style lang="css" scoped>
.news {
    position: relative;
}

li a {
    text-decoration: none;
    font-size: 20px;
    color: #74917D;

}

li {
    margin-bottom: 10px;
}

.detail_content {
    position: absolute;
    top: 30px;
    right: -35px;
    width: 500px;
    border: 1px solid rgb(161, 161, 161);
    height: 350px;
    border-radius: 10px;
}
</style>